<template>
    <el-container>
      <el-header class="header">
        <h2>用户信息</h2>
      </el-header>
      <el-main>
  
        <div class="section">
          <h3 class="section-title">基本信息</h3>
          <el-card class="info-card" shadow="hover">
            <el-descriptions border>
              <el-descriptions-item label="用户名">{{ user.name }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
              <el-descriptions-item label="注册时间">{{ user.registeredAt }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
  
  
        <div class="section">
          <h3 class="section-title">收藏的餐厅</h3>
          <el-card class="info-card" shadow="hover">
            <el-row :gutter="20">
              <el-col :span="8" v-for="favorite in user.favorites" :key="favorite.id">
                <el-card class="restaurant-card" shadow="hover">
                  <img :src="favorite.image" alt="restaurant image" class="restaurant-image" />
                  <div class="restaurant-info">
                    <h4>{{ favorite.name }}</h4>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="goToDetails(favorite.id)"
                        size="mini"
                    >
                      查看详情
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </div>
  
  
        <div class="section">
          <h3 class="section-title">历史操作记录</h3>
          <el-card class="info-card" shadow="hover">
            <el-table :data="user.history" border>
              <el-table-column prop="type" label="操作类型" />
              <el-table-column prop="content" label="内容" />
              <el-table-column prop="time" label="时间" />
            </el-table>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
          name: "付飞扬",
          email: "ffy@example.com",
          registeredAt: "2024-12-03",
          favorites: [
            { id: 1, name: "付飞扬的火锅店", image: "./src/assets/shopimg1.png" },
            { id: 2, name: "付飞扬的烤肉店", image: "./src/assets/shopimg2.png" },
            { id: 3, name: "付飞扬的拉面店", image: "./src/assets/shopimg3.png" },
          ],
          history: [
            { type: "评论", content: "评价付飞扬的火锅店", time: "2024-12-03" },
            { type: "收藏", content: "收藏付飞扬的烤肉店", time: "2023-12-03" },
          ],
        },
      };
    },
    methods: {
      goToDetails(id) {
        this.$router.push(`/restaurant/${id}`);
      },
    },
  };
  </script>
  
  <style scoped>
  
  .header {
    height: auto !important; 
    min-height: 80px;
    background-color: #42a5f5;
    padding: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    margin: 0;
    font-size: 2.4em;
    font-weight: bold;
  }
  
  
  .section {
    margin-top: 30px;
  }
  
  .section-title {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
    border-left: 5px solid #42a5f5;
    padding-left: 10px;
  }
  
  .info-card {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .el-table {
    background-color: #f9f9f9;
    border-radius: 8px;
  }
  
  
  .restaurant-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    background-color: #fff;
  }
  
  .restaurant-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .restaurant-info {
    padding: 10px;
  }
  
  .restaurant-info h4 {
    font-size: 1.2em;
    margin: 10px 0;
  }
  
  .el-button {
    background-color: #42a5f5;
    border-color: #42a5f5;
    color: white;
    font-size: 14px;
    width: 100%;
  }
  
  .el-button:hover {
    background-color: #1e88e5;
    border-color: #1e88e5;
  }
  
  .el-button[icon="el-icon-search"] {
    padding-left: 10px;
  }
  
  
  @media (max-width: 768px) {
    .restaurant-info h4 {
      font-size: 1em;
    }
  
    .restaurant-image {
      height: 150px;
    }
  
    .restaurant-card {
      margin-bottom: 20px;
    }
  }
  </style>
  